<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>form-demo</title>
    <link rel="stylesheet" href="https://unpkg.com/view-design@4.0.2/dist/styles/iview.css">
    <style>
        #app {
            padding: 10px 20px;
            width: 50%;
            margin: auto;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div id="app">
      <vue-form-maker :options="options" />
    </div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/view-design@4.0.2/dist/iview.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-form-maker/dist/vue-form-maker.js"></script>    
<script>
new Vue({
  el: "#app",
  data: {
		options: {
        // 表单属性 非必需
      formProps:{
        'label-width': 60
      },
      // 表单数据 必需
      formData: {
        accout: '',
        pwd: '',
        mail: '',
        gender: '',
        msg: '',
        phone: '',
        color: 'red',
      },
      // 表单项组件数据 必需
      formItem: [
        {
          type: 'input',
          key: 'accout',
          label: '账号',
          props: {
            placeholder: '请输入账号...'
          },
          rules: {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }
      	},
        {
        	type: 'input',
          key: 'pwd',
          label: '密码',
          props: {
            placeholder: '请输入密码...',
        		type: 'password'
          },
          rules: {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        },
        {
        	type: 'input',
          key: 'mail',
          label: '邮箱',
          props: {
            placeholder: '请输入邮箱...',
          },
          rules: {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          }
        },
        {
        	type: 'radioGroup',
          key: 'gender',
          label: '性别',
        	children: [
        		{
        			label: '女'
        		},
        		{
        			label: '男'
        		}
      		],
          rules: {
            required: true,
            message: '请选择性别',
            trigger: 'change'
          }
        },
        {
        	type: 'input',
          key: 'phone',
          label: '手机',
          props: {
            placeholder: '请输入手机号...',
          },
          rules: {
            required: true,
            trigger: 'blur',
            validator(rule, value, callback) {
                if (value === '') {
                    callback(new Error('请输入手机号'))
                } else if (value.length != 11) {
                    callback(new Error('请输入正确的手机号'))
                } else {
                    callback()
                }
            }
        	}
        },
        {
  				type: 'input',
  				label: '留言',
  				key: 'msg',
  				props: {
            placeholder: '留言...',
            type: 'textarea'
          },
  				rules: {
            required: true,
            trigger: 'blur',
            message: '请留下您宝贵的意见'
          }
				},
        {
  				label: '颜色',
  				key: 'color',
          type: 'colorPicker',
        },
      ],
      // 提交按钮 必需
      submit:{
        text: '提交',
        props: {
          type: 'primary'
        },
        success(formData) {
          alert(JSON.stringify(formData))
        },
        fail(formData) {
          alert('验证失败')
        }
      }
    }
  }
})
</script>
</body>
</html>